<template>
    <div>
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="课程名称">
                <el-input v-model="formInline.courseName" placeholder="请输入" clearable />
            </el-form-item>
            <!-- <el-form-item label="加入时间">
                <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>

        </el-form>
        <!-- <div class="opt_btn">
            <el-button type="primary" size="small" @click="showAdd">加入课程</el-button>
        </div> -->
        <div class="bank" v-loading="loading">
            <div class="bank_item" v-for="item, index in tableData" :key="index" @click="toBankDetail(item)">
                <div class="bank_item_img">
                    <div class="mask"></div>
                    <div class="mask_content">
                        <p>{{ item.operatorName }}</p>
                        <p>{{ formatData(item.createTime) }}</p>
                        <p>{{ formatData(item.modifyTime) }}</p>
                    </div>
                    <img src="@/assets/bank.png" alt="" v-if="!item.courseUrl">
                    <img :src="item.courseUrl" alt="" v-else>
                </div>
                <div class="bank_item_title">{{ item.courseName }}</div>
            </div>
        </div>
        <div class="page">
            <Pagination @getDate="queryCourseList" :queryNum="queryCount" />
        </div>

        <!-- 添加题库 -->
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";

const router = useRouter();
import { ElMessage } from "element-plus";
import Pagination from "@/components/base/MyPagination.vue";
import { getCourseListApi } from "@/api/index";

const formInline = reactive({
    courseName: '',
})

const loading = ref(false)
// 分页用
const queryCount = ref(1);
const tableData = ref([
])
// 查询我的课程
const queryCourseList = async (page) => {
    loading.value = true
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
            params[key] = formInline[key];
        } else if (formInline.time && formInline.time.length !== 0) {
            params.startTime = formInline.time[0];
            params.endTime = formInline.time[1];
        }
    }
    const res = await getCourseListApi(params)
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    console.log(res);
    page.totalCount = res.data.totalCount;
}
// 提交搜索条件
const onSubmit = () => {
    queryCount.value += 1;
};
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};

// 题库详细
const toBankDetail = (item) => {
    // 缓存当前题库信息
    sessionStorage.setItem('MyHomeworkDetail', JSON.stringify(item))
    router.push({
        name: 'MyHomeworkDetail'
    })
}


</script>

<style lang="scss" scoped>
.bank {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    grid-template-rows: auto;
    justify-items: center;
    align-items: center;

    &_item {
        cursor: pointer;
        padding: 5px;
        position: relative;


        &_img {
            width: 200px;
            height: 250px;
            border-radius: 5px;
            overflow: hidden;



            &:hover .mask {
                opacity: 1;
            }

            .mask_content {
                position: absolute;
                width: inherit;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 20px;
                font-weight: 600;
                opacity: 0;
                z-index: 9;

                p {
                    text-align: center;
                    margin: 5px 0;
                }
            }

            &:hover .mask_content {
                animation: down_animation 0.5s ease 1 normal forwards;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        &_title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-top: 10px;
            /* padding: 5px; */
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
}
</style>